M

MLOG

Français

Découvrez les requêtes de style de conteneur CSS, une approche puissante du design réactif qui permet aux composants de s'adapter au style de leur conteneur.

Requêtes de Style de Conteneur CSS : Design Réactif Basé sur le Style pour les Applications Globales

Le design réactif traditionnel repose fortement sur les media queries, adaptant la mise en page et les styles d'un site web en fonction de la taille de la fenêtre (viewport). Bien qu'efficace, cette approche peut entraîner des incohérences et des difficultés lorsqu'il s'agit de composants complexes qui doivent s'adapter à différents contextes au sein de la même fenêtre. Les requêtes de style de conteneur CSS offrent une solution plus granulaire et intuitive, permettant aux éléments de réagir au style appliqué à leur élément conteneur, offrant un comportement réactif véritablement basé sur les composants.

Que sont les requêtes de style de conteneur CSS ?

Les requêtes de style de conteneur étendent la puissance des requêtes de conteneur au-delà des simples conditions basées sur la taille. Au lieu de vérifier la largeur ou la hauteur d'un conteneur, elles vous permettent de vérifier la présence de propriétés et de valeurs CSS spécifiques appliquées à ce conteneur. Cela permet aux composants d'adapter leur style en fonction du contexte du conteneur, plutôt que de ses seules dimensions.

Pensez-y de cette façon : au lieu de demander « La fenêtre est-elle plus large que 768px ? », vous pouvez demander « Ce conteneur a-t-il la propriété personnalisée --theme: dark; définie ? ». Cela ouvre un tout nouveau monde de possibilités pour créer des composants flexibles et réutilisables qui peuvent s'adapter de manière transparente à différents thèmes, mises en page ou variations de marque sur votre site web ou votre application.

Avantages des requêtes de style de conteneur

Comment utiliser les requêtes de style de conteneur CSS

Voici une explication de la manière d'implémenter les requêtes de style de conteneur :

1. Configuration du Conteneur

Tout d'abord, vous devez désigner un élément comme conteneur. Vous pouvez le faire en utilisant la propriété container-type :

.container {
  container-type: inline-size;
}

La valeur inline-size est la plus courante et la plus utile, car elle permet au conteneur de requêter sa taille en ligne (horizontale). Vous pouvez également utiliser size qui requête à la fois la taille en ligne et la taille de bloc. Utiliser uniquement size peut avoir des implications sur les performances si vous n'êtes pas prudent.

Alternativement, utilisez container-type: style pour utiliser un conteneur uniquement pour les requêtes de style, et non de taille, ou container-type: size style pour utiliser les deux. Pour contrôler le nom du conteneur, utilisez container-name: mon-conteneur puis ciblez-le avec @container mon-conteneur (...).

2. Définition des Requêtes de Style

Maintenant, vous pouvez utiliser la règle-at @container style() pour définir des styles qui s'appliquent lorsqu'une condition spécifique est remplie :

@container style(--theme: dark) {
  .component {
    background-color: #333;
    color: #fff;
  }
}

Dans cet exemple, les styles à l'intérieur de la règle @container ne seront appliqués à l'élément .component que si son élément conteneur a la propriété personnalisée --theme définie sur dark.

3. Application des Styles au Conteneur

Enfin, vous devez appliquer les propriétés CSS que vos requêtes de style vérifient à l'élément conteneur :

<div class="container" style="--theme: dark;">
  <div class="component">Ceci est un composant.</div>
</div>

Dans cet exemple, le .component aura un fond sombre et un texte blanc car son conteneur a le style --theme: dark; appliqué directement dans le HTML (par souci de simplicité). La meilleure pratique consiste à appliquer les styles via des classes CSS. Vous pouvez également utiliser JavaScript pour modifier dynamiquement les styles sur le conteneur, déclenchant ainsi les mises à jour des requêtes de style.

Exemples Pratiques pour les Applications Globales

1. Composants à Thème

Imaginez un site web qui prend en charge plusieurs thèmes. Vous pouvez utiliser les requêtes de style de conteneur pour ajuster automatiquement le style des composants en fonction du thème actif.

/* CSS */
.app-container {
  --theme: light;
}

@container style(--theme: dark) {
  .card {
    background-color: #333;
    color: #fff;
  }
}

@container style(--theme: light) {
  .card {
    background-color: #f0f0f0;
    color: #333;
  }
}

/* HTML */
<div class="app-container" style="--theme: dark;">
  <div class="card">
    <h2>Titre de la carte</h2>
    <p>Contenu de la carte.</p>
  </div>
</div>

Dans cet exemple, le composant .card basculera automatiquement entre un thème sombre et un thème clair en fonction de la propriété --theme de son conteneur. C'est très bénéfique pour les sites où les utilisateurs peuvent choisir différents thèmes selon leurs préférences.

2. Variations de Mise en Page

Vous pouvez utiliser les requêtes de style de conteneur pour créer différentes variations de mise en page pour les composants en fonction de l'espace disponible ou de la mise en page globale de la page. Prenons l'exemple d'un composant de sélection de langue. Dans la navigation principale, il pourrait s'agir d'un menu déroulant compact. Dans le pied de page, il pourrait s'agir d'une liste complète des langues disponibles.

/* CSS */
.navigation {
  --layout: compact;
}

.footer {
  --layout: expanded;
}

@container style(--layout: compact) {
  .language-selector {
    /* Styles pour menu déroulant compact */
  }
}

@container style(--layout: expanded) {
  .language-selector {
    /* Styles pour la liste complète des langues */
  }
}

/* HTML */
<nav class="navigation" style="--layout: compact;">
  <div class="language-selector">...

<footer class="footer" style="--layout: expanded;">
  <div class="language-selector">...

Cette approche est précieuse pour les sites web s'adressant à des interfaces utilisateur diverses sur différents appareils et plateformes. Considérez que les structures des sites mobiles et de bureau diffèrent souvent considérablement, et cela peut aider les composants à s'adapter.

3. Adaptation au Type de Contenu

Prenons l'exemple d'un site d'actualités avec des résumés d'articles. Vous pouvez utiliser les requêtes de style de conteneur pour ajuster la présentation des résumés selon qu'ils incluent une image ou non.

/* CSS */
.article-summary {
  --has-image: false;
}

@container style(--has-image: true) {
  .article-summary {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
  }
}

/* HTML (avec image) */
<div class="article-summary" style="--has-image: true;">
  <img src="..." alt="..." />
  <div>...
</div>

/* HTML (sans image) */
<div class="article-summary" style="--has-image: false;">
  <div>...
</div>

Cela permet une présentation plus attrayante et informative des résumés d'articles, améliorant ainsi l'expérience utilisateur. Notez que définir la propriété `--has-image` directement en HTML n'est pas idéal. Une meilleure approche consisterait à utiliser JavaScript pour détecter la présence d'une image et ajouter ou supprimer dynamiquement une classe (par exemple, `.has-image`) à l'élément `.article-summary`, puis à définir la propriété personnalisée `--has-image` dans la règle CSS pour la classe `.has-image`.

4. Style Localisé

Pour les sites web internationaux, les requêtes de style de conteneur peuvent être utilisées pour adapter les styles en fonction de la langue ou de la région. Par exemple, vous pourriez vouloir utiliser des tailles de police ou des espacements différents pour les langues avec des textes plus longs.

/* CSS */
.locale-container {
  --language: en;
}

@container style(--language: ja) {
  .text {
    font-size: 1.1em;
    letter-spacing: 0.05em;
  }
}

@container style(--language: ar) {
  .text {
    direction: rtl;
  }
}

/* HTML */
<div class="locale-container" style="--language: ja;">
  <p class="text">...</p>
</div>

Cela permet de créer des expériences plus personnalisées et conviviales pour différents publics linguistiques. Pensez que certaines langues comme l'arabe et l'hébreu s'écrivent de droite à gauche, et des styles spécifiques doivent être appliqués. Pour le japonais et d'autres langues d'Asie de l'Est, un espacement et une taille de police différents peuvent être nécessaires pour un rendu correct des caractères.

5. Considérations sur l'Accessibilité

Les requêtes de style de conteneur peuvent également améliorer l'accessibilité en adaptant les styles des composants en fonction des préférences de l'utilisateur ou des capacités de l'appareil. Par exemple, vous pouvez augmenter le contraste d'un composant si l'utilisateur a activé le mode de contraste élevé dans son système d'exploitation.

/* CSS */
body {
  --high-contrast: false;
}

@media (prefers-contrast: more) {
  body {
    --high-contrast: true;
  }
}

@container style(--high-contrast: true) {
  .component {
    background-color: black;
    color: white;
  }
}

/* HTML */
<div class="component">...

Cela garantit que votre site web est utilisable et accessible à tous, quelles que soient leurs capacités. Notez l'utilisation de la media query `@media (prefers-contrast: more)` pour détecter le mode de contraste élevé au niveau du système d'exploitation, puis la définition de la propriété personnalisée `--high-contrast`. Cela vous permet de déclencher des changements de style à l'aide d'une requête de style basée sur les paramètres système de l'utilisateur.

Bonnes Pratiques

Support des Navigateurs

Les requêtes de style de conteneur bénéficient d'un excellent support sur les navigateurs modernes, y compris Chrome, Firefox, Safari et Edge. Cependant, les navigateurs plus anciens peuvent ne pas prendre entièrement en charge cette fonctionnalité. Assurez-vous d'utiliser des requêtes de fonctionnalité pour fournir des styles de repli pour ces navigateurs ou utilisez un polyfill.

Conclusion

Les requêtes de style de conteneur CSS offrent une approche puissante et flexible du design réactif, vous permettant de créer des sites web et des applications véritablement basés sur les composants et adaptables. En tirant parti du style des éléments conteneurs, vous pouvez débloquer un nouveau niveau de contrôle et de granularité dans vos conceptions, aboutissant à des expériences plus maintenables, évolutives et conviviales pour un public mondial.

Adoptez les requêtes de style de conteneur pour construire des composants réactifs qui s'adaptent de manière transparente à divers thèmes, mises en page, langues et exigences d'accessibilité, créant ainsi une expérience web véritablement globale.

Ressources